<template>
  <div
    class="shopcar-item box flex flex-cc"
    @click="props.v.selected = !props.v.selected"
  >
    <!-- 选中 -->
    <div class="selected" v-if="props.v.selected">
      <van-icon class="cl-success" name="success" size="20px"></van-icon>
    </div>

    <!-- 封面 -->
    <div
      class="flex-fs-0 click mr-10"
      @click.stop="router.push(`/product/detail?id=${v.goods.id}`)"
    >
      <van-image
        class="cover radius radius--lg"
        :src="v.goods.image"
      ></van-image>
    </div>

    <!-- 数据 -->
    <div>
      <div class="fz-12">
        <!-- 名称 -->
        <div class="fz-14 hide-2">{{ v.goods.title }}</div>

        <div>
          <div>
            <span>原价：</span>
            <span>{{ v.goods.marketprice }} U</span>
          </div>

          <div>
            <span>现价：</span>
            <span>{{ v.goods.price }} U</span>
          </div>
        </div>

        <div>
          <div>
            <span>规格：</span>
            <span>未接入</span>
          </div>

          <div>
            <span>尺码：</span>
            <span>未接入</span>
          </div>
        </div>

        <div class="flex mt-10">
          <van-stepper
            @click.stop
            @change="setShopcarNum(v)"
            v-model="v.count"
          ></van-stepper>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import api from 'js/api'

const props = defineProps(['v'])
const router = useRouter()

// 修改购物车数量
async function setShopcarNum({ id, count: nums }) {
  const params = {
    id,
    nums,
  }

  await await api.setShopcarNum(params)
}
</script>

<style lang="scss" scoped>
.shopcar-item {
  position: relative;

  .cover {
    width: 100px;
    height: 100px;
  }

  .selected {
    position: absolute;
    bottom: 10px;
    right: 15px;
  }
}
</style>
